<template>
  <div class="tip">
    <div class="department">
      <div class="header">
        <div class="left">
          <department :width="18" :height="18"></department>
          <span>常见科室</span>
        </div>
        <div class="right">
          <span>全部</span><right :width="14" :height="14"></right>
        </div>
      </div>
      <div class="content">
        <ul>
          <li v-for="item in list" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>

    <!-- 平台公共 -->
    <div class="notice">
      <div class="header">
        <div class="left">
          <platform :width="18" :height="18"></platform>
          <span>平台的公告</span>
        </div>
        <div class="right">
          <span>全部</span><right :width="14" :height="14"></right>
        </div>
      </div>
      <div class="content">
        <ul>
          <li v-for="item in notices" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>

    <div class="notice">
      <div class="header">
        <div class="left">
          <closeHospitalService :width="18" :height="18"></closeHospitalService>
          <span>停诊公告</span>
        </div>
        <div class="right">
          <span>全部</span><right :width="14" :height="14"></right>
        </div>
      </div>
      <div class="content">
        <ul>
          <li v-for="item in notices" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import department from "@/components/icon-fonts/department.vue";
import platform from "@/components/icon-fonts/platform.vue";
import closeHospitalService from "@/components/icon-fonts/close-hospital-service.vue";
import right from "@/components/icon-fonts/right.vue";

const list = [
  "消化内科",
  "呼吸内科",
  "神经内科",
  "内科",
  "神经外科",
  "妇科",
  "产科",
  "儿科",
];

const notices = [
  "关于延长北京大学国际医院放假的通知",
  "北京中医药大学东方医院部分科室医生门诊医",
  "言兹多医院身源暂停更新通知",
];
</script>

<style scoped lang="scss">
.tip {
  color: #7f7f7f;
  .department {
    .header {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;

        span {
          margin-left: 5px;
        }
      }

      .right {
        display: flex;
        align-items: center;
        span {
          margin-right: 2px;
        }
      }
    }

    .content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 10px;
        li {
          width: 45%;
          margin-top: 12px;
        }
      }
    }
  }

  .notice {
    margin-top: 40px;
    .header {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;

        span {
          margin-left: 5px;
        }
      }

      .right {
        display: flex;
        align-items: center;
        span {
          margin-right: 2px;
        }
      }
    }

    .content {
      ul {
        margin-top: 20px;
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 12px;
        }
      }
    }
  }
}
</style>
